<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style type="text/css">
        ul{
            list-style: none;
        }
        .imgs{
            width:590px;
            height:470px;
            overflow: hidden;
        }
        .dots{
            width:164px;
            position:absolute;
            left:250px;
            top:450px;
            z-index: 999;
        }
        .dot{
            width:10px;
            height:10px;
            border:2px solid #fff;
            border-radius:10px;
            display: inline-block;
        }
    </style>
</head>
<body>
<div class="ad">
    <ul id="imgs" class="imgs">
        <li  class="img_li"><img src="img/01.jpg"></li>
        <li  class="img_li"><img src="img/02.jpg"></li>
        <li  class="img_li"><img src="img/03.jpg"></li>
        <li  class="img_li"><img src="img/04.jpg"></li>
        <li  class="img_li"><img src="img/05.jpg"></li>
        <li  class="img_li"><img src="img/06.jpg"></li>
    </ul>
    <ul class="dots">
        <li data='0' class="dot" style="background-color: #fff"></li>
        <li data='1' class="dot"></li>
        <li data='2' class="dot"></li>
        <li data='3' class="dot"></li>
        <li data='4' class="dot"></li>
        <li data='5' class="dot"></li>
    </ul>
</div>

<script type="text/javascript">
    //简单轮播图1  图片自动切换
    //写法1 设置定时器  移动图片
    // setInterval(function(){
    // 	//每隔一秒，将第一张图片移动到最后
    // 	//获取第一张图片的li
    // 	// var li = document.querySelectorAll('.img_li')[0];
    // 	var li = document.querySelector('.img_li');
    // 	var ul = document.getElementById('imgs');
    // 	// var li = ul.firstElementChild;
    // 	//将第一个li子元素 放到ul的最后一个子元素 位置
    // 	ul.appendChild(li); //appendChild 向父元素 添加最后一个子元素
    // }, 1000);

    //写法2 设置定时器 通过css进行控制图片的显示和隐藏
    // var num = 0;
    // setInterval(function(){
    // 	num++;
    // 	//先将所有的图片都隐藏
    // 	//获取所有的图片li
    // 	var img_lis = document.querySelectorAll('.img_li');
    // 	//遍历数组，对每一张图片的li，设置css样式 display none
    // 	for(var i=0; i<img_lis.length; i++){
    // 		// img_lis[i]  一个一个的li标签
    // 		img_lis[i].style.display = 'none';
    // 	}
    // 	//将下标为num图片显示  对num下标的图片li，设置设置css样式 display block
    // 	if(num == img_lis.length){
    // 		// 0 1 2 3 4 5  0 1 2 3 4 5
    // 		num = 0;
    // 	}
    // 	img_lis[num].style.display = 'block';
    // }, 1000);
    //
    //
    //
    //简单轮播图2  鼠标悬浮切换图片
    //1）使用自定义属性，保存小白圈下标
    //先获取所有的小白圈的li
    // var dot_lis = document.querySelectorAll('.dot');
    //遍历绑定鼠标悬浮事件
    // for(var i=0; i<dot_lis.length; i++){
    // 	//逐个绑定事件
    // 	dot_lis[i].onmouseover = function(){
    // 		//先隐藏所有图片，给所有的小白圈去掉背景色
    // 		var img_lis = document.querySelectorAll('.img_li');
    // 		for(var j=0; j<img_lis.length; j++){
    // 			img_lis[j].style.display = 'none';
    // 			dot_lis[j].style.backgroundColor = '';
    // 		}
    // 		//当前的小白圈加背景色
    // 		this.style.backgroundColor = 'white';
    // 		//显示对应的图片
    // 		// 获取当前小白圈的下标，用于获取对应的图片
    // 		// console.log( this );
    // 		// console.log( this.getAttribute('data') );
    // 		// 在小白圈的li上自定义一个data属性 记录对应的下标
    // 		var index = this.getAttribute('data');
    // 		img_lis[index].style.display = 'block';
    // 	}
    // }
    //
    // 使用匿名函数自调用，保存下标i
    // var dot_lis = document.querySelectorAll('.dot');
    // for(var i=0; i<dot_lis.length; i++){
    // 	(function(i){ // for循环 绑定事件，事件中i丢失问题
    // 		// 函数形参 相当于在函数内部使用var定义了一个局部变量 var i = i;
    // 		//逐个绑定事件
    // 		dot_lis[i].onmouseover = function(){
    // 			//先隐藏所有图片，给所有的小白圈去掉背景色
    // 			var img_lis = document.querySelectorAll('.img_li');
    // 			for(var j=0; j<img_lis.length; j++){
    // 				img_lis[j].style.display = 'none';
    // 				dot_lis[j].style.backgroundColor = '';
    // 			}
    // 			//当前的小白圈加背景色
    // 			this.style.backgroundColor = 'white';
    // 			//显示对应的图片
    // 			// 获取当前小白圈的下标，用于获取对应的图片
    // 			// console.log(i);
    // 			img_lis[i].style.display = 'block';
    // 		}
    // 	})(i);
    // }
</script>
<script type="text/javascript">
    //整合综合效果
    //封装一个函数，根据一个数字参数，显示指定的图片
    function change(n){
        // 获取所有的图片li、获取所有小白圈li
        var img_lis = document.querySelectorAll('.img_li');
        var dot_lis = document.querySelectorAll('.dot');
        //遍历数组
        for(var i=0; i<img_lis.length; i++){
            //将所有的图片都隐藏
            img_lis[i].style.display = 'none';
            //将所有的小白圈背景色去掉
            dot_lis[i].style.backgroundColor = '';
        }
        //根据下标参数n,将指定的图片显示
        img_lis[n].style.display = 'block';
        //根据下标参数n,将指定的小白圈背景色加上
        dot_lis[n].style.backgroundColor = 'white';
    }

    //自动切换  num变量 和 timer变量 一定要是全局变量
    var num = 0;
    // var timer = setInterval(function(){
    // 	//获取所有的图片的li，用于后续获取长度
    // 	var img_lis = document.querySelectorAll('.img_li');
    // 	num++;
    // 	//num是作为下标，显示图片的，不能超出最大下标
    // 	if(num == img_lis.length){
    // 		num = 0;
    // 	}
    // 	//根据num显示对应的图片
    // 	change(num);
    // }, 1000);
    var timer;
    function setTimer(){
        timer = setInterval(function(){
            //获取所有的图片的li，用于后续获取长度
            var img_lis = document.querySelectorAll('.img_li');
            num++;
            //num是作为下标，显示图片的，不能超出最大下标
            if(num == img_lis.length){
                num = 0;
            }
            //根据num显示对应的图片
            change(num);
        }, 1000);
    }
    setTimer();
    //鼠标悬浮切换图片
    //获取所有的小白圈，循环绑定事件
    var dot_lis = document.querySelectorAll('.dot');
    for(var i=0; i<dot_lis.length; i++){
        (function(i){
            //函数内部i变成了局部变量
            dot_lis[i].onmouseover = function(){
                //鼠标悬浮小白圈，停止自动切换的定时器
                clearInterval(timer);
                //获取悬浮的小白圈的下标
                //调用change函数
                change(i);
                //如果需要让自动切换图片按照以前顺序继续，则设置num的值为i
                num = i;
            }
            //鼠标离开小白圈，重新设置定时器
            dot_lis[i].onmouseout = function(){
                //调用封装的设置定时器的函数
                setTimer();
            }
        })(i);

    }
</script>
</body>
</html>